<template>
  <rx-layout>
    <div slot="center">
      <a-form-model ref="form" :model="mdl" :rules="rules" layout="vertical" class="rx-a-form-vertical">

            <a-form-model-item   :label="i18n('form.fieldKey','字段标识')" prop="field">
              <a-input    v-model="mdl.field"/>
            </a-form-model-item>

            <a-form-model-item   :label="i18n('form.province','省')" prop="PROVINCE">
              <a-select
                show-search
                v-model="mdl.PROVINCE"
                :placeholder="i18n('form.province','省')"

                :filter-option="filterOption"
                :options="fields"
                @change="handleChange(mdl.PROVINCE,'PROVINCE')"
                allowClear
              >
              </a-select>
            </a-form-model-item>

            <a-form-model-item  :label="i18n('form.city','市')" prop="CITY">
              <a-select
                show-search
                v-model="mdl.CITY"
                :placeholder="i18n('form.city','市')"

                :filter-option="filterOption"
                :options="fields"
                @change="handleChange(mdl.CITY,'CITY')"
                allowClear
              >
              </a-select>
            </a-form-model-item>

            <a-form-model-item  :label="i18n('form.county','县(区)')" prop="COUNTY">
              <a-select
                show-search
                v-model="mdl.COUNTY"
                :placeholder="i18n('form.county','县(区)')"

                :filter-option="filterOption"
                :options="fields"
                @change="handleChange(mdl.COUNTY,'COUNTY')"
                allowClear
              >
              </a-select>
            </a-form-model-item>

            <a-form-model-item   :label="i18n('form.address','详情地址')" prop="ADDRESS">
              <a-select
                show-search
                v-model="mdl.ADDRESS"
                :placeholder="i18n('form.address','详情地址')"

                :filter-option="filterOption"
                :options="fields"
                @change="handleChange(mdl.ADDRESS,'ADDRESS')"
                allowClear
              >
              </a-select>
            </a-form-model-item>

      </a-form-model>
    </div>
  </rx-layout>
</template>

<script>

  import {BaseFormModel} from "@lowcode/jpaas-common-lib";
  import FormBoListApi from "@/api/form/core/formBoList";
  export default {
    name: "renderConfig_address",
    props: ["layerid", "destroy"],
    mixins: [BaseFormModel],
    data() {
      return {
        rules: {
          field: [{required: true, message: this.i18n('form.fieldKey','字段标识','input'), trigger: 'change'}],
          PROVINCE: [{required: false, message: this.i18n('form.province','省','select'), trigger: 'change'}],
          CITY: [{required: false, message: this.i18n('form.city','市','select'), trigger: 'change'}],
          COUNTY: [{required: false, message: this.i18n('form.county','县(区)','select'), trigger: 'change'}],
          ADDRESS: [{required: false, message: this.i18n('form.address','详情地址','input'), trigger: 'change'}],
        },
        fields: []
      }
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"formCellRender",key);
        },
      setData(data,fieldDts,listId) {
        if(data){
          this.mdl=data;
        }
        this.fields=fieldDts;
        if(listId) {
          this.getFields(listId);
        }
      },
      getFields(listId){
          this.fields=[];
          FormBoListApi.reloadColumns(listId).then(res => {
            for(var i = 0; i < res.data.length; i++){
                var newRow = {
                    label: res.data[i].header,
                    value: res.data[i].field,
                    key: res.data[i].dataType
                }
                this.fields.push(newRow);
            }
          });
        },
      validate(callback) {
        var self = this;
        this.$refs.form.validate(valid => {
          if (valid) {
            callback();
          } else {
            return;
          }
        });
      },
      getData() {
        return this.mdl;
      },
      handleChange(value,field){
        this.mdl[field] = value;
      },
      filterOption(input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        );
      },
    }
  }
</script>

<style scoped>

</style>